@import './modules/reset.scss';
@import './modules/header.scss';
@import './modules/footer.scss';

.banner-c{
    width: 1220px;
    height: 320px;
    margin: 0 auto;
    .banner-img{
        margin: 33px 10px;
     
    }
    .choose-flow{
        .selectTotal{
            margin-right: 25px;
            margin-left: 10px;
            width: 102px;
            float: left;
            text-align: center;
            background-color: #a8daad;
            .t1{
                font-size: 30px;
                color: #fff;
                font-weight: bold;
            }
            .t2{
                font-size: 12px;
                font-weight: bold;
                display: inline-block;
                margin: 0 auto;
                color: #fff;
            }
        }
        .choose-s{
            ul{
                display: flex;
                width: 1070px;
                justify-content: space-between;
                li{
                    height: 102px;
                    width: 193px;
                    position: relative;
                    .choose-t1{
                        font-size: 16px;
                        font-weight: 700;
                        margin-top: 24px;
                        margin-left:80px;
                        margin-bottom: 16px;
                        display: block;
                      
                    }
                    .choose-t2{
                        font-size: 14px;
                        margin-left:80px;
                        margin-bottom: 16px;
                        display: block;
                        color: #75a075;
                    }
                    &:nth-child(1){
                        background-color: #e6f2e6;
                        color: #75a075;
                    }
                    &:nth-child(2){
                        background-color: #faf0e3;
                        color: #9d7d52;
                    }
                    &:nth-child(3){
                        background-color: #f1f6f9;
                        color: #75a075;
                    }
                    &:nth-child(4){
                        background-color: #f7f7f7;
                        color: #5c7d91;
                    }
                    &:nth-child(5){
                        background-color: #e6f2e6;
                        color: #75a075;
                    }
                }
                
            }
            
        }
    }
}
.select-flow-c{
    width: 1190px;
    height: 40px;
    margin: 0 auto;
    background-color: #f4f4f4;
    border-bottom: 1px solid #e8e8e8;
    line-height: 40px;
    padding-left: 10px;
    .ac{
        color: #34b11f;
    }
    span{
        color: #333;
        margin-right: 40px;
        margin-bottom: 16px;
        display: inline-block;
        cursor: pointer;
        font-size: 14px;
        &:hover{
            color: #ff2f2f;
        }
    }
}
.flowerList-c{
    width: 1200px;
    margin: 0 auto;
}
.flower-nav{
	margin-top: 20px;
	>ul{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		li{
			width:280px ;
			height: 420px;
			overflow: hidden;
            background-color: #f9f9f9;
            margin-bottom: 20px;
			a{
				display: block;
				width: 279px;
				height: 279px;
				img{
					width: 279px;
					height: 279px;
					transition: all 0.5s;
				}
			}
			p{
				
				&:nth-child(2){
					margin-top: 20px;
					font-size: 14px;
					color: #333;
					text-align: center;
				}
				&:nth-child(3){
					width: 195px;
					margin-top: 10px;
					margin-left: 40px;
					font-size: 18px;
					color: #ff2f2f;
					padding-bottom: 15px;
					border-bottom:1px solid #eaeaea;
					span{
						font-size:14px;
						margin-left: 30px;
						color: #999;
						text-decoration:line-through;
					}
				
				}
				&:nth-child(4){
					margin-top:10px ;
					text-align: center;
					color: #a17536;
					font-size: 14px;
				}
			}
			&:hover img{
				transform:scale(1.02);
				box-shadow: 0 3px 10px #e5e5e5;
				background-color: #f9f9f9;
			}
			
		}
		
	}
}
.nextPage{
    margin: 10px auto 0;
    width: 400px;
    height: 50px;
    a,ul,li{
        float: left;
    }
    a{
        display: block;
        padding: 10px 12px;
        border: 1px solid #e6e6e6;
        &:hover{
            color: #fff;
            background-color: #77cb7f;
            border: 1px solid #77cb7f;
        }
    }
    .ac a{
        color: #fff;
        background-color: #77cb7f;
    }
}
.to-top{
    display: none;
    position: fixed;
    bottom: 50px;
    right: 10px;
    cursor: pointer;
}